<template>
  <div class="fold" :class="{active: active}" @click="getContHeight">
    <div @click="active = !active"><div><slot></slot></div><i></i></div>
    <div class="fold-wrap" :style="contStyle"><div ref="wrap"><slot name="content"></slot></div></div>
  </div>
</template>
<script>
export default {
  name: "fold",
  props: ["conf"],
  data(){
    return {
      active: false,
      height: 0
    }
  },
  computed: {
    contStyle(){
      return {height: `${this.active ? this.height : 0}px`}
    },
  },
  watch:{
    active(){
      this.getContHeight();
    },
  },
  methods: {
    getContHeight(){
      this.height = this.$refs.wrap.offsetHeight;
    },
  }
}
</script>
<style scoped>
.fold{
  padding: 10px 20px;
  border: 1px solid red;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 2px red;
}
.fold > div:first-child{
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.fold > div:first-child>*{
  vertical-align: middle;
}
.fold > div:first-child>div:first-child{
  flex: 1 1 auto;
}
.fold > div:first-child i{
  position: relative;
  display: inline-block;
  height: 12px;
  width: 12px;
  transform: rotate(0);
  transition: all .3s;
}
.fold.active > div:first-child i{
  transform: rotate(180deg);
}
.fold > div:first-child i:before{
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  content: "";
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  border: 2px solid red;
  border-top: transparent;
  border-left: transparent;
  transform: translate(-50%,-50%) rotate(45deg);
}
.fold > div:last-child{
  transition: all .3s;
  overflow: hidden;
  border-top: 1px dashed transparent;
}
.fold.active > div:last-child{
  border-top: 1px dashed red;
}
</style>
